<template>
  <view @click="itemClick('mask')" class="mask-content">
    <view class="dialog-content" @click.stop.prevent="">
      <view
        class="head-content"
        v-if="info.title"
        :style="info.content ? '' : 'min-height:90rpx;padding:30rpx'"
      >
        <text>{{ info.title }}</text>
      </view>
      <scroll-view class="main-content" scroll-y v-if="info.content">
        <view class="info-content">
          <text>{{ info.content }}</text>
        </view>
      </scroll-view>
      <view class="foot-content alert" v-if="'alert' == info.type">
        <view class="btn active" @click.stop.prevent="itemClick('confirm')">
          {{ info.confirmText }}
        </view>
      </view>
      <view class="foot-content confirm" v-if="'confirm' == info.type">
        <view class="btn cancel" @click="itemClick('cancel')">
          {{ info.cancelText }}
        </view>
        <view class="btn active" @click.stop.prevent="itemClick('confirm')">
          {{ info.confirmText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {
        type: 'alert', //alert:单按钮,confirm:双按钮
        title: '', //
        content: '',
        cancelText: '取消',
        confirmText: '确定',
        isMaskClose: '1' //1点击遮罩层关闭弹窗
      }
    }
  },
  onLoad(info = {}) {
    this.info = { ...this.info, ...info }
  },
  methods: {
    itemClick(type) {
      if (type == 'mask' && this.info.isMaskClose != '1') {
        return
      }
      uni.navigateBack()
      uni.$emit('wujw_common_dialog', type)
    }
  }
}
</script>

<style lang="scss">
$btncolor: #f6632d;

page {
  background: transparent;
}

.mask-content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  .dialog-content {
    background-color: #ffffff;
    width: 580rpx;
    border-radius: 10rpx;

    .head-content {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #343434;
      font-weight: bold;
      font-size: 32rpx;
      padding: 20rpx 30rpx;
    }

    .main-content {
      max-height: 350rpx;
      .info-content {
        min-height: 100rpx;
        padding: 10rpx 30rpx;
        color: #636463;
        font-size: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .foot-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      .btn {
        font-size: 30rpx;
        /*border-radius: 66rpx;*/
        height: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &.alert {
        .btn {
          background: linear-gradient(-90deg, #fb4736, #fe8125);
          color: #ffffff;
          font-size: 30rpx;
          border-radius: 60rpx;
          height: 66rpx;
          width: 300rpx;
          padding: 0 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      &.confirm {
        justify-content: space-around;
        border-top: 1rpx solid #f3f3f3;
        .btn {
          min-width: 230rpx;
          &.active {
            flex: 1;
            // background-color: $btncolor;
            color: $btncolor;
            font-size: 32rpx;
          }
          &.cancel {
            flex: 1;
            border-right: 1rpx solid #f3f3f3;
            color: #333;
            font-size: 32rpx;
            // border-radius: 66rpx;
          }
        }
      }
    }
  }
}
</style>
